<!--
  ~ Copyright (c) 2022 Contributors to the Eclipse Foundation
  ~
  ~ See the NOTICE file(s) distributed with this work for additional
  ~ information regarding copyright ownership.
  ~
  ~ This program and the accompanying materials are made available under the
  ~ terms of the Eclipse Public License 2.0 which is available at
  ~ http://www.eclipse.org/legal/epl-2.0
  ~
  ~ SPDX-License-Identifier: EPL-2.0
  -->
<div>
    <div>
        <div class="row resizable_pane" style="height: 40vh;">
            <div class="col-md-7 resizable_flex_column">
                <form class="input-group input-group-sm mb-1 mt-1" autocomplete="off">
                    <div class="btn-group dropend">
                        <button id="searchFavorite" class="btn btn-outline-secondary btn-sm" data-bs-toggle="tooltip"
                            title="Toggle favorite for search filter">
                            <i id="favIcon" class="bi bi-star"></i>
                        </button>
                    </div>
                    <input autocomplete="false" name="hidden" type="text" style="display:none;">
                    <input type="search" class="form-control form-control-sm" id="searchFilterEdit" name="search"
                           spellcheck=false autocomplete="off" />
                    <span class="input-group-text" id="searchFilterCount" data-bs-toggle="tooltip"
                          title="Amount of things matching the filter">
                    </span>
                    <button type="button" id="searchThings" class="btn btn-outline-primary btn-sm" data-bs-toggle="tooltip"
                        title="Search things by thingId or valid ditto search filter">
                        search
                    </button>
                    <button type="button" id="pinnedThings" class="btn btn-outline-secondary btn-sm me-3 button_round_right"
                        data-bs-toggle="tooltip" title="Pinned things: get the list of all individually pinned things">
                        pinned
                    </button>
                    <button type="button" id="tableSettings" class="btn btn-outline-secondary btn-sm button_round_both"
                        data-bs-toggle="modal" data-bs-target="#fieldsModal">
                        <span data-bs-toggle="tooltip" title="Adjust fields for things table">
                            <i class="bi bi-gear"></i>
                        </span>
                    </button>
                </form>
                <div class="table-wrap">
                    <table class="table table-striped table-hover table-sm">
                        <thead>
                            <tr id="thingsTableHead"></tr>
                        </thead>
                        <tbody id="thingsTableBody"></tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-5 resizable_flex_column" style="height: auto" id="details">
                <ul id="tabItemsThing" class="nav nav-tabs nav-fill">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabThingDetails">Details</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" data-bs-target="#tabModifyThing">Manage</a>
                        </li>
                    </ul>
                    <div id="tabContentThing" class="tab-content" style="flex-grow:1; overflow:hidden;">
                        <div class="tab-pane fade show active container no-margin" id="tabThingDetails">
                            <div class="table-wrap">
                                <table class="table table-striped table-hover table-sm">
                                    <tbody id="tbodyThingDetails"></tbody>
                                </table>
                            </div>
                    </div>
                    <div class="tab-pane fade container no-margin" id="tabModifyThing">
                        <crud-toolbar id="crudThings" label="Thing ID">
                            <div class="input-group input-group-sm mb-1">
                                <label class="input-group-text" id="labelX">Definition</label>
                                <div class="btn-group dropend">
                                    <button class="btn btn-outline-secondary btn-sm dropdown-toggle"
                                    data-bs-toggle="dropdown" disabled id="buttonThingDefinitions"></button>
                                    <ul id="ulThingDefinitions" class="dropdown-menu" style="position: fixed; top: auto;"></ul>                                    
                                </div>
                                <input type="text" class="form-control" id="inputThingDefinition" disabled></input>
                            </div>
                            <div class="ace_container mb-1" style="flex-grow: 1;">
                                <div class="script_editor" id="thingJsonEditor"></div>
                            </div>
                        </crud-toolbar>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<h5 data-bs-toggle="collapse" data-bs-target="#collapseAttributes">Attributes <span class="badge rounded-pill bg-info"
        id="badgeAttributeCount"></span></h5>
<hr />
<div class="collapse" id="collapseAttributes">
    <div class="row resizable_pane" style="height: 20vh;">
        <div class="col-md-7 resizable_flex_column" style="overflow-y:scroll;">
            <table class="table table-striped table-hover table-sm">
                <tbody id="tbodyAttributes"></tbody>
            </table>
        </div>
        <div class="col-md-5 resizable_flex_column" style="height: auto">
            <ul class="nav nav-tabs nav-fill" id="tabItemsAttribute">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabCrudAttribute">Manage</a>
                </li>
            </ul>
            <div class="tab-content" style="flex-grow: 1;" id="tabContentAttribute">
                <div class="tab-pane container active no-margin" id="tabCrudAttribute">
                    <crud-toolbar id="crudAttribute" label="Attribute key">
                        <div class="ace_container mb-1" style="flex-grow: 1;">
                            <div class="script_editor" id="attributeEditor"></div>
                        </div>
                    </crud-toolbar>
                </div>
            </div>
        </div>
    </div>
</div>
